/*eslint-disable*/
<template>
    <!-- 顶栏容器 -->
    <div style="background-color:#545c64;
        height: 15%;
        width:100%; 
        margin-top: 0px; 
        border: 0px; 
        padding: 0px; 
        display:flex; 
        flex-wrap: nowrap;">
        <!-- 中软博客部分，点击跳转回首页‘/index’ -->
        <div style="width:150px;margin-top:15px; background-color: #545c64; color:#fff;text-align: center; font-size: 130%; font-weight:500"
            @click="toIndex()">
            中软博客</div>
        <!-- 顶部菜单部分 -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b" @select="handleSelect" style="width: 40%;">
            <!-- <el-menu-item index="1">Processing Center</el-menu-item>
            <el-menu-item index="2">Info</el-menu-item>
            <el-menu-item index="3">Orders</el-menu-item> -->
        </el-menu>
        <!-- 搜索框部分，点击图标搜索 -->
        <div style="width: 38%; height:80%;background-color: #545c64; display: flex;">
            <el-input v-model="input" placeholder="搜索内容..." style="width: 80%;margin-left: 10px; margin-top: 13px;"
                @keyup.enter="doSearch(input)" />
            <el-icon style="width: 8%; height: auto;margin-top: 13px;" @click="doSearch(input)">
                <Search style="color: white;size:45px;margin-left: 5px;" />
            </el-icon>
        </div>
        <!-- 下拉菜单 -->
        <el-dropdown style="width: 12%; margin-left: 5%">
            <span class="el-dropdown-link" id="nickname">
                {{ nickname }}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="toMe()">个人信息</el-dropdown-item>
                    <el-dropdown-item @click="toMyBlog()"> 我的博文</el-dropdown-item>
                    <el-dropdown-item @click="toMyFriend()"> 我的好友</el-dropdown-item>
                    <el-dropdown-item @click="toEvent()"> 查看活动</el-dropdown-item>
                    <el-dropdown-item @click="toResource()"> 资源工具</el-dropdown-item>
                    <el-dropdown-item v-if="isAdmin"> 用户管理</el-dropdown-item>
                    <el-dropdown-item divided style="color: red;" @click="exitLogin()">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script lang="ts" setup>
    import {
        ref
    } from 'vue'
    import {
        ArrowDown,
        Search
    } from '@element-plus/icons-vue'
    const activeIndex = ref('1');
    const handleSelect = (key: string, keyPath: string[]) => {
        console.log(key, keyPath);
    }
    let input = ref('');
    const isAdmin = ref(false);
    if (localStorage.getItem('userRole') == '1') {
        isAdmin.value = true;
    } else isAdmin.value = false;

    const doSearch = (input: string) => {
        if (localStorage.getItem('userRole') == '1')
            window.location.href = 'http://localhost:8080/adminSearch?word=' + input;
        else window.location.href = 'http://localhost:8080/search?word=' + input;
    }
    const toIndex = () => {
        if (localStorage.getItem('userRole') == '1') window.location.href = 'http://localhost:8080/adminIndex';
        else window.location.href = 'http://localhost:8080/index';
    }
    const toMe = () => {
        console.log("跳转至个人信息");
    }
    const toMyBlog = () => {
        window.location.href = 'http://localhost:8080/myblog';
        console.log("跳转至个人博文页");
    }
    const toEvent = () => {
        console.log("跳转至活动页");
    }
    const toMyFriend = () => {
        console.log("跳转至好友页")
    }
    const toResource = () => {
        console.log("跳转至资源管理页")
    }
    const exitLogin = () => {

        console.log("退出登录")
    }

    function getUrlParam(key: string) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
    }
    input.value = getUrlParam('word');
    let nickname = localStorage.getItem("nickname");
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
        color: white;
        font-size: 110%;
        text-align: center;
        width: 100%;
        margin-top: 18px;
    }

    .el-tooltip__trigger:focus-visible {
        outline: unset;
    }
</style>